<template>
  <div>
    <div class="weui-cells weui-cells_form">
      <div class="weui-cells__title">修改用户信息</div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">用户头像</label></div>
        <div class="weui-cell__bd">
          <croppa v-model="headImg"
                  :width="100"
                  :height="100"
                  :initial-image="initialImage"
                  placeholder=""
                  @new-image-drawn="getHeadImgUrl"
                  @image-remove="removeHeadImg">
                  ref="headImg"
          >
            <img slot="placeholder" src="../../../../static/images/shiming/touxiang.png" style="width: 100%">
            <!--<img v-if="isHeadImgUrl" slot="placeholder" :src="user.headImgUrl.substr(0,4).toLowerCase() == 'http' ? user.headImgUrl : resUrl+user.headImgUrl" style="width: 100%">-->
          </croppa>
        </div>
      </div>

      <div class="weui-cell">
        <div class="weui-cell__hd"><label class="weui-label">用户昵称</label></div>
        <div class="weui-cell__bd">
          <input class="weui-input" type="text" placeholder="请输入用户昵称" required="required" v-model="nickName"/>
        </div>
      </div>

    </div>

    <div class="btn-box" style="margin-top: 30px">
      <button class="weui-btn weui-btn_warn" type="button" @click.prevent="updateUserInfo">提交修改</button>
    </div>

  </div>
</template>

<script>
  import {getUser,setUser,getStatusMapByKey,getByteLen} from '../../../assets/js/tools';
  import {ipconfig} from '../../../assets/js/ipconfig';
  import {getUserMsg,getAccount,updateByUser,uploadImage} from '../../../assets/js/getData';
  export default {
    name: "updateUserinfo",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        headImg:{},
        initialImage:null,
        user:null,
        isHeadImgUrl:null,
        urlType:null,

        nickName:'',
        headImgUrl:'',
      }
    },
    created(){
      let eStorageUrl = getStatusMapByKey('eStorageUrl');
      this.urlType = eStorageUrl['userApproveImages'].val;

      this.user = getUser();

      if(this.user.hasOwnProperty("headImgUrl")){
        this.isHeadImgUrl = true;
      }else {
        this.isHeadImgUrl = false;
      }

      this.nickName = this.user.nickName;
    },
    mounted(){
      var image = new Image()
      // Notice: it's necessary to set "crossorigin" attribute before "src" attribute.
      image.setAttribute('crossorigin', 'anonymous');
      image.src = (this.user.headImgUrl&&this.user.headImgUrl.substr(0,4).toLowerCase() == 'http') ? this.user.headImgUrl : this.resUrl + this.user.headImgUrl;

      this.initialImage = image;
      this.headImg.refresh()
    },
    methods:{
      removeHeadImg(){
        this.headImgUrl = '';
      },
      getHeadImgUrl(){
        if (!this.headImg.hasImage()) {
          Toast('请设置用户头像');
          return;
        }
        console.log(this.headImg);
        this.headImg.generateBlob((blob)=>{
          var fd = new FormData();
          fd.append('files', blob);
          fd.append('type', this.urlType);
          uploadImage(fd).then(res => {
            if(res.data.reqResult.code > 0){
              let data = res.data.data;
              this.headImgUrl = data[0].url;
            }else {
              Toast(res.data.reqResult.msg);
            }
          })
        });
      },
      updateUserInfo(){
        if(!this.nickName){
          Toast('用户名不能为空');
          return;
        }
        if(getByteLen(this.nickName)>12){
          Toast('最长为6个汉字或12个字符');
          return;
        }
        let params = {
          nickName:this.nickName,
          headImgUrl:this.headImgUrl
        };
        updateByUser(params).then(res => {
          if(res.data.reqResult.code > 0){
            Toast('修改成功');
            let data = res.data.data;
            this.user.nickName = data.nickName;
            this.user.headImgUrl = data.headImgUrl;
            setUser(this.user);
            this.$router.push({name: 'me'});
          }else {
            Toast(res.data.reqResult.msg);
          }
        })
      }
    }
  }
</script>

<style scoped>

</style>
